<!-- 行情页面 -->
<template>
	<view :style="$store.state.skin">
		<view class="container">
			<view class="market-content">
				<view class="tab_nav">
					<view class="navTitle" v-for="(item, index) in navList" :key="index">
						<view :class="{ active: isActive === index }" @click="checked(index)">
							{{ item.title }}
						</view>
					</view>
				</view>
				<view class="tab-content">
					<view class="contenttile">名称</view>
					<view class="contentcolor-one">最新价</view>
					<view class="contentcolor-two">涨幅</view>
				</view>

				<!-- 涨幅榜-start -->
				<view class="nav_item" v-if="isActive == 0">
					<view class="liststock">
						<view class="section-list" v-for="(liststock, index) in listStock" @click="toWangneng(liststock)">
							<view class="left-list">
								<view class="left-list-text">
									<text :class="liststock.numbering.substring(0, 2)">{{ liststock.numbering.substring(0, 2) }}</text>
									<text>{{ liststock.name }}</text>
								</view>
								<view class="left-list-num">{{ liststock.numbering }}</view>
							</view>
							<view v-if="parseFloat(liststock.change) < 0 ? (liststockcolor = 'warpgreen') : (liststockcolor = 'warpred')" class="liststock-price">
								<text :class="liststockcolor">{{ liststock.price }}</text>
							</view>
							<view class="right-list" v-if="parseFloat(liststock.change) < 0 ? (liststockbackcolor = 'backgreen') : (liststockbackcolor = 'backred')">
								<view :class="liststockbackcolor">{{ liststock.change }}%</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 涨幅榜-end -->

				<!-- 跌幅榜-start -->
				<view class="nav_item" v-if="isActive == 1">
					<!-- 内容 -->
					<view class="liststock">
						<view class="section-list" v-for="(listdecline, index) in listDecline" @click="toWangneng(listdecline)">
							<view class="left-list">
								<view class="left-list-text">
									<text :class="listdecline.numbering.substring(0, 2)">{{ listdecline.numbering.substring(0, 2) }}</text>
									<text>{{ listdecline.name }}</text>
								</view>
								<view class="left-list-num">{{ listdecline.numbering }}</view>
							</view>
							<view v-if="parseFloat(listdecline.change) < 0 ? (liststockcolor = 'warpgreen') : (liststockcolor = 'warpred')" class="liststock-price">
								<text :class="liststockcolor">{{ listdecline.price }}</text>
							</view>
							<view class="right-list" v-if="parseFloat(listdecline.change) < 0 ? (liststockbackcolor = 'backgreen') : (liststockbackcolor = 'backred')">
								<view :class="liststockbackcolor">{{ listdecline.change }}%</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 涨幅榜-end -->

				<!-- 热门榜-start -->
				<view class="nav_item" v-if="isActive == 2">
					<!-- 内容 -->
					<view class="liststock">
						<view class="section-list" v-for="(listpopular, index) in listPopular" @click="toWangneng(listpopular)">
							<view class="left-list">
								<view class="left-list-text">
									<text :class="listpopular.code.substring(0, 2)">{{ listpopular.code.substring(0, 2) }}</text>
									<text>{{ listpopular.name }}</text>
								</view>
								<view class="left-list-num">{{ listpopular.code }}</view>
							</view>
							<view v-if="parseFloat(listpopular.change) < 0 ? (liststockcolor = 'warpgreen') : (liststockcolor = 'warpred')" class="liststock-price">
								<text :class="liststockcolor">{{ listpopular.price }}</text>
							</view>
							<view class="right-list" v-if="parseFloat(listpopular.change) < 0 ? (liststockbackcolor = 'backgreen') : (liststockbackcolor = 'backred')">
								<view :class="liststockbackcolor">{{ listpopular.change }}%</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 热门榜-end -->

				<!-- 自选-start -->
				<view class="nav_item" v-if="isActive == 3">
					<!-- 内容 -->
					<view class="liststock">
						<view class="section-list" v-for="(listoptional, index) in listOptional" @click="toWangneng(listoptional)">
							<view class="left-list">
								<view class="left-list-text">
									<text :class="listoptional.code.substring(0, 2)">{{ listoptional.code.substring(0, 2) }}</text>
									<text>{{ listoptional.name }}</text>
								</view>
								<view class="left-list-num">{{ listoptional.code }}</view>
							</view>
							<view v-if="parseFloat(listoptional.change) < 0 ? (liststockcolor = 'warpgreen') : (liststockcolor = 'warpred')" class="liststock-price">
								<text :class="liststockcolor">{{ listoptional.price || 0 }}</text>
							</view>
							<view class="right-list" v-if="parseFloat(listoptional.change) < 0 ? (liststockbackcolor = 'backgreen') : (liststockbackcolor = 'backred')">
								<view :class="liststockbackcolor">{{ listoptional.change }}%</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 自选-end -->
			</view>

			<!-- 弹窗-start -->
			<!-- <Popup :Showhide='Showhide'></Popup> -->
			<!-- 弹窗-end -->
		</view>
	</view>
</template>

<script>
import Popup from '@/components/Popup/Popup.vue';
import request from '@/api/request.js';
export default {
	data() {
		return {
			// Showhide:'',
			isActive: 0,
			navList: [
				{
					index: 0,
					title: '涨幅榜'
				},
				{
					index: 1,
					title: '跌幅榜'
				},
				{
					index: 2,
					title: '热门榜'
				},
				{
					index: 3,
					title: '自选'
				}
			],
			listStock: [],
			listDecline: [],
			listPopular: [],
			listOptional: []
		};
	},
	components: {
		Popup
	},
	methods: {
		checked(index) {
			this.isActive = index;
		},
		toWangneng(data) {
			console.log(data);
			uni.navigateTo({
				url: `/pages/wangneng/wangneng?code=${data.numbering || data.code}`
			});
		}
	},
	// 生命周期函数接收路由传值
	async onLoad(options) {
		if (options.isActive === '3') {
			this.isActive = 3;
		}
		let userData = uni.getStorageSync('userData');
		// this.Showhide=options.addon;
		// 进行后端数据请求
		// 涨幅榜的，type=1
		let amount = await request.get('/api/marketlist/getStockRank?type=1');
		if (amount.code === 1) {
			this.listStock = [];
			this.listStock = amount.data;
		}
		// 跌幅榜的，type=2
		let range = await request.get('/api/marketlist/getStockRank?type=2');
		if (range.code === 1) {
			this.listDecline = [];
			this.listDecline = range.data;
		}
		// 热门榜
		let hot = await request.get('/api/marketlist/StockHotList');
		if (hot.code === 1) {
			this.listPopular = [];
			this.listPopular = hot.data;
		}
		// 自选
		let optional = await request.get(`/api/marketlist/optional`);
		if (optional.code === 1) {
			this.listOptional = [];
			this.listOptional = optional.data;
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	position: absolute;
	background: #f2f2f2;
	color: #282828;
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	padding-bottom: 3rem;
	padding-top: 0.5rem !important;

	.market-content {
		background-color: #ffffff;
	}
}

.tab-content {
	text-align: center;
	color: #999999;
	font-size: 0.65rem;
	padding: 0.3rem 0.6rem;
	display: flex;
	justify-content: space-between;
	line-height: 1.5rem;

	.contenttile {
		width: 40%;
		text-align: left;
	}

	.contentcolor-one {
		color: #ff6161;
		width: 20%;
		text-align: right;
	}

	.contentcolor-two {
		color: #ff6161;
		width: 40%;
		text-align: right;
	}
}

// 这是代码块的css-start
.tab_nav {
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid #f1f1f1;

	.navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 0.9rem;
		font-family: Alibaba PuHuiTi;
		color: #333;
		font-weight: bold !important;
	}

	.active {
		position: relative;
		color: var(--nav-bg);
	}

	.active::after {
		content: '';
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: var(--nav-bg);
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
}

// 这是代码块的css-end

// list列表-start
.liststock {
	background-color: #fff;

	.section-list {
		display: flex;
		padding: 0.3rem 0.6rem;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #f1f1f1;

		.left-list {
			display: flex;
			flex-direction: column;
			width: 40%;

			.left-list-text {
				color: #333333;
				font-size: 0.8rem;
				line-height: 1.5rem;
			}

			.left-list-num {
				color: #999999 !important;
				font-size: 0.6rem !important;
				line-height: 1.5;
			}
		}

		.liststock-price {
			width: 20%;
			text-align: right;
		}

		.right-list {
			width: 40%;
			display: flex;
			flex-direction: row-reverse;

			.right-list-text {
				width: 50% !important;
				background-color: #ea5504;
				color: #ffffff;
				width: 3.5rem;
				font-size: 0.7rem;
				text-align: center;
				line-height: 1rem;
			}
		}
	}
}

.sz {
	background: #9b79ea;
	color: #fff !important;
	border-radius: 0.1rem;
	font-size: 0.5rem !important;
	padding: 0 0.2rem;
	margin-right: 0.3rem;
}

.sh {
	background: #f33841;
	color: #fff !important;
	border-radius: 0.1rem;
	font-size: 0.5rem !important;
	padding: 0 0.2rem;
	margin-right: 0.3rem;
}

.bj {
	background: #4474bb;
	color: #fff !important;
	border-radius: 0.1rem;
	font-size: 0.5rem !important;
	padding: 0 0.2rem;
	margin-right: 0.3rem;
}

.warpgreen {
	color: #58bd6f !important;
}

.warpred {
	color: #ff6161 !important;
}

.backgreen {
	width: 50% !important;
	background-color: #58bd6f;
	color: #ffffff;
	width: 3.5rem;
	font-size: 0.7rem;
	text-align: center;
	line-height: 1rem;
}

.backred {
	width: 50% !important;
	background-color: #ff6161;
	color: #ffffff;
	width: 3.5rem;
	font-size: 0.7rem;
	text-align: center;
	line-height: 1rem;
}
//list列表-end
</style>
